<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .box {
            width: 200px;
            height: 200px;
            background-color: aquamarine;
            margin: 50px;
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>
<script>
    // 鼠标相关的事件



    var box = document.querySelector(".box");

    // onclick  鼠标单击事件(鼠标左键 按下并松开) 
    // box.onclick = function(){
    //     console.log("box被点击");
    // }

    // onclick  鼠标双击事件(鼠标左键) 
    // box.ondblclick = function () {
    //     console.log("box被双击");
    // }

    // onmouseover  鼠标移入
    // box.onmouseover = function(){
    //     console.log("鼠标移入");
    // }

    // onmouseover  鼠标移出
    // box.onmouseout = function(){
    //     console.log("鼠标移出");
    // }

    // onmousedown 鼠标按下时触发(鼠标左 中 右 侧键均可触发, 按下的一瞬间)
    // onmouseup   鼠标松开时触发(鼠标左 中 右 侧键均可触发, 松开的一瞬间)

    // onmousemove 鼠标移动时触发


    // 如何知道按下的鼠标按键是哪一个?
    // 浏览器侦听到事件触发后,执行对应的事件处理函数  => 并传入事件对象,存储事件触发时相关的信息(什么时间 发生了什么类型的事件 发生在谁身上 鼠标按下的按键  鼠标的位置 键盘按下的按键)
    // button  事件触发时,按下的鼠标按键 (左:0  中:1  右: 2  侧键:3 4)

    // box.onmousedown = function(e){  // event  evt   e 形参,用于接收事件对象
    //     console.log("鼠标被按下",e.button);
    // }

    // box.onmouseup = function(e){
    //     console.log("鼠标被松开",e.button);
    // }

    // box.onmousemove = function(){
    //     console.log("鼠标移动时触发");
    // }

    // onwheel  鼠标滚轮滚动时触发 
    // box.onwheel = function(){ // 绑定给元素
    //     console.log("111111");
    // }

    window.onwheel = function(){  // 绑定给页面
        console.log("111111");
    }


</script>

</html>